{include file="public/header" select="0" /}
<style>
    * {
        padding: 0;
        margin: 0;
        resize: none;
        border: none;
        list-style: none;
        font-size: 0.8125rem;
    }

    img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        vertical-align: middle;
    }

    .flex-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .login {
        height: 15.375rem;
    }

    .login .flex-center {
        width: 5.125rem;
        height: 5.125rem;
    }

    .login-list {
        padding: 1rem 2rem;
    }

    .login-list li {
        display: flex;
        align-items: center;
        margin-bottom: 1.4375rem;
        border-bottom: 1px solid #eee;
    }

    .login-list li > img {
        width: 1.25rem;
        margin-right: .5rem;
    }

    .login-list input {
        flex: 1;
        height: 1.75rem;
    }

    .login-list .flex-center {
        width: 1.25rem;
        height: 1.25rem;
    }

    .btn {
        width: 80%;
        margin: 0 10%;
        height: 2rem;
        border-radius: 2rem;
        background-color: #60B331;
        color: #fff;
    }

    .btn-yr {
        background-color: #ccc;
    }

    .login-no-num {
        height: 50px;
        padding: 0 10%;
    }

    .login-no-num a, .login-no-num p {
        color: #60B331;
    }

    .flex-layout {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
</style>
<body class="hide-top bgc">
<div id="app">
    <div class="title bgc">{:cache('system')['web_site_title']}</div>

    <div class="login flex-center">
        <p class="flex-center">
            <img src="{:cache('system')['web_site_logo']}" alt="">
        </p>
    </div>
    <form action="{:url('login/check')}" method="post" class="form layui-form">
        <ul class="login-list">
            <li>
                <img src="/static/index/login/icon3.png" alt="">
                <input type="text" name="mobile" lay-verify="required" lay-reqtext="请填写手机号码/会员编号"
                       lay-verType="tips"
                       placeholder="请填写手机号码/会员编号" autocomplete="off">
            </li>
            <li>
                <img src="/static/index/login/icon5.png" alt="">
                <input type="password" name="password" lay-verify="required" lay-reqtext="请填写手机号码/会员编号"
                       lay-verType="tips" class="psd" placeholder="请填写登录密码">
                <div class="flex-center eye">
                    <img src="/static/index/login/icon7.png" alt="">
                </div>
            </li>
        </ul>
    </form>

    <div class="btn flex-center" lay-submit lay-filter="save" formObj=".form">登录</div>

    <div class="flex-layout login-no-num">
        <div>还没有账号?<a href="{:url('register/index')}">立即注册</a></div>
    </div>
</div>
</body>

{include file="public/footer" select="0" /}
<script>
    $('.eye').click(function() {
        let type = $(this).siblings('input').attr('type')
        if(type == 'password') {
            $(this).siblings('input').attr('type', 'text')
        } else {
            $(this).siblings('input').attr('type', 'password')
        }
        $(this).find('img').attr('src', type == 'password' ? '/static/index/login/icon2.png' : '/static/index/login/icon7.png')
    })
</script>